{% load static %}
{% load qr_code %}

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #3B47A1;">

  <a class="navbar-brand" href="{% url 'home' %}">
    <img src="{% static 'images/logo.png' %}" width="90" height="40" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">
      {% if request.user.is_staff %}
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'home' %}">Dashboard</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'products' %}">Products</a>
      </li>
      {% else %}
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'account' %}">Settings</a>
      </li>
      {% endif %}
    </ul>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal" data-target="#myModal">ZoTech
      Software </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            {% qr_from_text "https://zoeloe27.pythonanywhere.com/" size=18 border=5 %}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false" style="color: #fff;">
          Hello, {{request.user}}
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
          <!-- <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a> -->
        </div>
      </li>
    </ul>

  </div>
</nav>


{% comment %}
{% load static %}
{% load qr_code %}
<style media="screen">
  #hello-msg {
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
  }

  .logo img {
    width: 75px;
    height: 50px;
  }

  @media screen and (max-width: 768px) {
    .logo img {
      width: 70px;
      height: 25px;
    }
  }

  @media screen and (max-width: 576px) {
    .logo img {
      width: 50px;
      height: 18px;
    }
  }
</style>

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #3B47A1;">
  <a href="{% url 'home' %}" class="logo"><img src="{% static 'images/logo.png' %}" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">

      {% if request.user.is_staff %}
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'home' %}">Dashboard</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'products' %}">Products</a>
      </li>
      {% else %}
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'account' %}">Settings</a>
      </li>

      {% endif %}
    </ul>
  </div>

  <span>
    <div class="container">
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#myModal">ZoTech
        Software </button>
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-body">
              {% qr_from_text "https://zoeloe27.pythonanywhere.com/" size=18 border=5 %}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </span>

  <span id="hello-msg">Hello, {{request.user}}</span>
  <span><a class="btn btn-sm btn-outline-danger" href="{% url 'logout' %}">Logout</a></span>

</nav>
{% endcomment %}